<template>
  <div>
    <div class="d-flex w-100">
      <custom-radio-tag1 ref="radioTagRef" class="mb-1 w-100" :list="list" :value="activeIndex" is-scroll @change="tagChange" />
    </div>
    <template v-if="active === '隐患台账'">
      <customSearch ref="customSearch" placeholder="请输入企业名称" title="隐患列表" :total="total" @search="handleSearch" @superSearch="openSuperSearch" />
      <div style="display: flex;justify-content: center;align-items: center">
        <van-button class="customSearch__btn" icon="plus" hairline color="rgba(255,255,255,0.5)" size="small" @click="openFormComponent">录入隐患</van-button>
      </div>
    </template>
    <template v-else-if="active === '专家排查隐患审核'">
      <customSearch ref="customSearch" placeholder="请输入企业名称" title="隐患列表" :total="total" @search="handleSearch" @superSearch="openSuperSearch" />
      <div style="display: flex;justify-content: center;align-items: center">
        <van-button class="customSearch__btn" icon="plus" hairline color="rgba(255,255,255,0.5)" size="small" @click="openAuditComponent">批量审核</van-button>
      </div>
    </template>
    <template v-else-if="active === '隐患排查任务'">
      <customSearch ref="customSearch" placeholder="请输入检查计划名称" title="排查任务管理" :total="total" @search="handleSearch" @superSearch="openSuperSearch" />
    </template>

    <div>
      <div v-if="listData.length > 0" class="common_list">
        <div v-for="(item, index) in listData" :key="index" class="list_item" @click="goToDetails(item)">
          <template v-if="active === '隐患台账'">
            <div class="content_area">
              <div class="number_order">{{ index + 1 }}</div>
              <div class="right_content">
                <div class="content_title" style="max-width: 100%">
                  {{ item.companyName }}
                  <van-tag plain :type="'primary'" :style="{color:item.dangersLevel === '重大隐患'?'#E45757 !important':item.dangersLevel === '一般隐患'?'#E78945 !important':'#C6EE00 !important'}" class="text-center" style="width: 2rem; display: block">{{ item.dangersLevel }}</van-tag>
                </div>
                <ul>
                  <li>
                    <i class="iconfont c-text-color1">&#xeab5;</i>
                    <div class="label">隐患来源 ：</div>
                    <div class="value">{{ item.checkSource ||'/' }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color2">&#xe87e;</i>
                    <div class="label">隐患位置：</div>
                    <div class="value">{{ item.position ||'/' }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color3">&#xe791;</i>
                    <div class="label">隐患类别：</div>
                    <div class="value ">{{ item.dangersType ||'/' }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color4">&#xe67a;</i>
                    <div class="label">隐患描述：</div>
                    <div class="value " style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.describe ||'/' }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color5">&#xe67a;</i>
                    <div class="label">整改状态：</div>
                    <div class="value ">{{ item.checkState ||'/' }}</div>
                  </li>
                </ul>
              </div>
            </div>
          </template>
          <template v-if="active === '专家排查隐患审核'">
            <div class="content_area">
              <div class="number_order">{{ index + 1 }}</div>
              <div class="right_content">
                <div class="content_title" style="max-width: 100%">
                  {{ item.companyName }}
                  <div class="d-flex align-items-center justify-content-center">
                    <div @click.stop="item.auditResult === '待审核'?checkboxesClick(index):''">
                      <van-checkbox v-model="item.checked" class="mr-1" :disabled="item.auditResult !== '待审核'" />
                    </div>
                    <van-tag plain :type="'primary'" :style="{color:item.dangersLevel === '重大隐患'?'#E45757 !important':item.dangersLevel === '一般隐患'?'#E78945 !important':'#C6EE00 !important'}" class="text-center" style="width: 2rem; display: block">{{ item.dangersLevel }}</van-tag>
                  </div>
                </div>
                <ul>
                  <li>
                    <i class="iconfont c-text-color1">&#xeab5;</i>
                    <div class="label">隐患来源：</div>
                    <div class="value">{{ item.checkSource ||'/' }}
                    </div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color2">&#xe87e;</i>
                    <div class="label">隐患位置：</div>
                    <div class="value">{{ item.position ||'/' }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color3">&#xe791;</i>
                    <div class="label">隐患类别：</div>
                    <div class="value ">{{ item.dangersType ||'/' }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color4">&#xe67a;</i>
                    <div class="label">隐患描述：</div>
                    <div class="value ">{{ item.describe ||'/' }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color5">&#xe67a;</i>
                    <div class="label">审核状态：</div>
                    <div class="value ">{{ item.auditResult ||'/' }}</div>
                  </li>
                </ul>
              </div>
            </div>
          </template>
          <template v-if="active === '隐患排查任务'">
            <div class="content_area">
              <div class="number_order">{{ index + 1 }}</div>
              <div class="right_content">
                <div class="content_title" style="max-width: 100%">
                  <span class="content_title_label">{{ item.checkTaskName }}</span>
                  <van-progress :percentage="item.taskSchedule" stroke-width="12" style="width: 3rem; display: block" />
                </div>
                <ul>
                  <li>
                    <i class="iconfont c-text-color2">&#xe8d5;</i>
                    <div class="label">所属年份：</div>
                    <div class="value">{{ item.years ||'/' }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color7">&#xe725;</i>
                    <div class="label">任务下发状态：</div>
                    <div class="value ">{{ item.checkTaskStatus ||'/' }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color4">&#xe685;</i>
                    <div class="label">下发时间：</div>
                    <div class="value ">{{ item.issueTime||'/' }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color1">&#xeab5;</i>
                    <div class="label">检查类型：</div>
                    <div class="value">{{ item.checkType ||'/' }}
                    </div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color3">&#xe67a;</i>
                    <div class="label">计划检查日期：</div>
                    <div class="value ">{{ item.checkTime ||'/' }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color5">&#xe700;</i>
                    <div class="label">检查组数量：</div>
                    <div class="value ">{{ item.teamNum ||'/' }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color6">&#xe725;</i>
                    <div class="label">检查企业数量：</div>
                    <div class="value ">{{ item.companyNum ||'/' }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color7">&#xe725;</i>
                    <div class="label">已完成检查数量：</div>
                    <div class="value ">{{ item.completeNum ||'/' }}</div>
                  </li>
                </ul>
              </div>
            </div>
          </template>
        </div>
      </div>
      <customLoadmore ref="customLoadmore" :page-num="form.pageNum" :pages="pages" @load="handlePages" />
    </div>
    <!-- 高级搜索框 -->
    <van-popup v-model="superSearch" position="right" :style="{ width: '90%', height: '100%', background:'white' }" lock-scroll close-on-popstate closeable class="custom-van-pop">
      <div class="pop-vertical-flex">
        <div class="pop-content">
          <template v-if="active === '隐患台账'">
            <customPopCheckbox :list="selectOptionAll['环保-隐患等级']" :check-value.sync="form.dangersLevel" title="隐患等级" />
            <customPopCheckbox :list="selectOptionAll['环保-隐患来源']" :check-value.sync="form.checkSource" title="隐患来源" />
            <customPopCheckbox :list="selectOptionAll['环保-隐患状态']" :check-value.sync="form.checkState" title="整改状态" />
            <customPopCheckbox :list="selectOptionAll['安全-隐患类别']" :check-value.sync="form.dangersType" title="隐患类别" />
          </template>
          <template v-else-if="active === '专家排查隐患审核'">
            <customPopCheckbox :list="selectOptionAll['环保-审核状态']" :check-value.sync="form.auditResult" title="审核状态" />
            <customPopCheckbox :list="selectOptionAll['环保-隐患等级']" :check-value.sync="form.dangersLevel" title="隐患等级" />
            <customPopCheckbox :list="selectOptionAll['安全-隐患类别']" :check-value.sync="form.dangersType" title="隐患类别" />
          </template>
          <template v-else-if="active === '隐患排查任务'">
            <customPopCheckbox :list="selectOptionAll['环保-隐患检查类型']" :check-value.sync="form.checkType" title="检查类型" />
            <customPopCheckbox :list="selectOptionAll['环保-隐患任务排查状态']" :check-value.sync="form.checkTaskStatus" title="任务下发状态" />
            <custom-timer type="date" title="下发时间" :start.sync="form.startTime" :end.sync="form.endTime" :is-interval="true" :picker-title="'请选择下发时间'" />
          </template>
        </div>
        <div class="pop-bottom">
          <van-button type="default" @click="resetSuperSearch">清空</van-button>
          <van-button type="info" @click="handleSuperSearch">确认</van-button>
        </div>
      </div>
    </van-popup>
    <!-- 录入隐患模态框 -->
    <van-popup
      v-model="formComponentShow"
      get-container="body"
      position="right"
      :style="{ width: '100%', height: '100%', backgroundColor: '#e6edf5' }"
      closeable
      close-icon="arrow-left"
      close-icon-position="top-left"
      lock-scroll
      safe-area-inset-bottom
      close-on-popstate
      class="custom-van-pop-2"
    >
      <div class="common-details">
        <div class="pop-title">录入隐患</div>
        <div class="pop-vertical-flex d-scroll">
          <div class="pop-content">
            <formComponent v-if="formComponentShow" v-model="formComponentShow" />
          </div>
        </div>
      </div>
    </van-popup>
    <!-- 审核 -->
    <van-popup
      v-model="auditComponentShow"
      get-container="body"
      position="right"
      :style="{ width: '100%', height: '100%', backgroundColor: '#e6edf5' }"
      closeable
      close-icon="arrow-left"
      close-icon-position="top-left"
      lock-scroll
      safe-area-inset-bottom
      close-on-popstate
      class="custom-van-pop"
    >
      <div class="pop-title">隐患审核</div>
      <div class="pop-vertical-flex">
        <div class="pop-content" style="background-color: white">
          <auditComponent v-if="auditComponentShow" v-model="auditComponentShow" :audit-list="auditList" @beforeCloseAuditComponent="beforeCloseAuditComponent" />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import formComponent from '../formComponent.vue'
import auditComponent from '../auditComponent.vue'
import commonList from '@/assets/mixin/commonList'
import { dangersLedgerExpertList, dangersLedgerList, dangersCompanyPlanList } from '@/api/commonPage/dangerTreatment'
import { Toast } from 'vant'
export default {
  components: { formComponent, auditComponent },
  mixins: [commonList],
  data() {
    return {
      active: '隐患台账',
      activeIndex: 0,
      formComponentShow: false,
      pages: 0,
      total: 0,
      form: {
        pageNum: 1,
        pageSize: 10,
        checkSource: '',
        checkState: '',
        companyIds: '-1',
        dangersLevel: '',
        dangersType: '',
        endTime: '',
        groupIsOk: '',
        startTime: '',
        checkTaskName: '', // 检查计划名称
        checkType: '',
        checkTaskStatus: ''
      },
      list: [
        {
          label: '隐患台账',
          listFun: dangersLedgerList
        },
        {
          label: '专家排查隐患审核',
          listFun: dangersLedgerExpertList
        },
        {
          label: '隐患排查任务',
          listFun: dangersCompanyPlanList
        }
      ],
      listFun: dangersLedgerList,
      current: '',
      listData: [],
      auditComponentShow: false,
      auditList: [] // 批量审核的dangersLedgerId集合
    }
  },
  watch: {
    formComponentShow(newVal, oldVal) {
      if (newVal === false) {
        this.getList(true)
      }
    }
  },
  mounted() {
    const { current, active } = this.$route.query
    // active为undefined则tab默认是隐患台账
    if (active) {
      const index = this.list.findIndex(val => val.label === active)
      this.activeIndex = index
      this.active = active
      this.listFun = this.list[index].listFun
    }
    if (this.active === '专家排查隐患审核') {
      this.form.checkSource = 2
    }
    if (current) {
      this.current = current
    }
    this.getList()
  },
  methods: {
    // 专家排查隐患审核-批量审核点击
    checkboxesClick(index) {
      this.listData[index].checked = !this.listData[index].checked
      this.$set(this.listData, index, this.listData[index])
    },
    // 切换tag标签
    tagChange(tagArg) {
      const { label, listFun } = tagArg.item
      this.$set(this, 'active', label)
      this.activeIndex = this.list.findIndex(val => val.label === label)
      this.form.pageNum = 1
      this.listData = []
      this.listFun = listFun
      this.resetSuperSearch()
      this.getList(true)
    },
    // 分页
    handlePages(value) {
      this.form.pageNum = value
      this.getList()
    },
    // customSearch输入框查询
    handleSearch(value) {
      if (this.active === '隐患台账' || this.active === '专家排查隐患审核') {
        this.form.companyName = value
      } else if (this.active === '隐患排查任务') {
        this.form.checkTaskName = value
      }
      this.form.pageNum = 1
      this.listData = []
      this.getList(true)
    },
    // 高级查询
    handleSuperSearch() {
      this.superSearch = false
      this.form.pageNum = 1
      this.listData = []
      this.getList(true)
    },
    // 重置高级查询
    resetSuperSearch() {
      Object.keys(this.form).forEach(val => {
        this.form[val] = ''
      })
      // 重置输入框查询
      this.$refs.customSearch.restore()
      this.form.pageSize = 10
      this.form.pageNum = 1
      this.form.companyIds = '-1'
    },
    // 跳转详情
    goToDetails(item) {
      const { dangersLedgerId, checkTaskId } = item
      if (this.active === '隐患台账' || this.active === '专家排查隐患审核') {
        this.$router.push({
          path: '/staging/dangerTreatmentDetails',
          query: { dangersLedgerId: dangersLedgerId, current: this.current, active: this.active }
        })
      } else if (this.active === '隐患排查任务' && item.checkTaskStatus !== '未下发') {
        this.$router.push({
          path: '/task/detail',
          query: { checkTaskId, current: this.current, active: this.active }
        })
      }
    },
    // 返回工作台
    back() {
      this.$router.push({
        path: '/staging/monitor',
        query: { current: this.current }
      })
    },
    // 打开表单弹窗
    openFormComponent() {
      this.formComponentShow = true
    },
    // 打开审核弹窗
    openAuditComponent() {
      if (this.listData.find(v => v.checked)) {
        this.auditComponentShow = true
        this.auditList = this.listData.filter(v => v.checked).map(v => v.dangersLedgerId)
      } else {
        Toast.fail('请选择需要审核的数据！')
      }
    },
    // 关闭审核弹窗回调
    beforeCloseAuditComponent() {
      this.getList(true)
    },
    // 获取列表数据
    async getList(flag) {
      this.$refs.customLoadmore.loadStatus = true
      this.layout.showLoading()
      this.form.checkSource = this.active === '专家排查隐患审核' ? '2' : this.form.checkSource
      const { status, data } = await this.listFun(this.form)
      if (status === 0 && data) {
        this.total = data.total
        this.listData = flag ? data.list : this.listData.concat(data.list)
        if (this.active === '专家排查隐患审核') {
          this.listData.forEach(v => { if (v.checked === undefined) { v.checked = false } })
        }
        this.pages = data.pages
      }
      this.$refs.customLoadmore.loadStatus = false
      this.layout.hideLoading()
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-van-pop-2 {
  background: url("~@/assets/images/wapper.png") no-repeat;
  .pop-title {
    color: #fff;
    text-align: center;
    height: 1.2rem;
    line-height: 1.2rem;
    font-size: 0.46667rem;
    font-weight: bold;
  }
  .pop-content {
    background-color: #fff;
    margin: 0 0.25rem ;
  }
  ::v-deep .van-popup__close-icon {
    color: #fff;
  }
}
::v-deep .customSearch__btn {
  margin-bottom: 20px !important;
  background-color: rgba(9,52,133,0.5) !important;
  border: 0.5px solid #ffffff !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: 0 35px !important;
}
.custom-van-pop {
  background: url("~@/assets/images/wapper.png") no-repeat;
  overflow: hidden;

  .pop-title {
    color: #fff;
    text-align: center;
    height: 1.2rem;
    line-height: 1.2rem;
    font-size: 0.46667rem;
    font-weight: bold;

    .icon-box {
      position: absolute;
      right: .5rem;
      top: 0;

      .iconfont.active {
        color: blue;
      }
    }
  }

  .pop-content {
    // background-color: #fff;
    margin: 0 0.25rem;
    padding: 0rem !important;
  }

  ::v-deep .van-popup__close-icon {
    color: #fff;
  }
}
</style>
